<template>
  <view class="">
	  <view class="topsearch flex flex-row justify-between items-center">
		  <view class="search flex flex-row justifity-start items-center">
		  <input type="text" value="" placeholder="请输入名称" v-model="name" />
		  <text  class="button" @tap="search">搜索</text>
		  </view>
		  <view class="xz flex flex-row justify-center items-center">
			  <picker @change="bindPickerChange($event,index)" :value="0" :range="columns" range-key="name">
			  	<view class="flex flex-row f_28 items-center " >
			  		{{columns[value].name}}<image src="@/static/arrow_right.png" mode="widthFix" class="arrow"></image>
			  	</view>
			  </picker>
		  </view>
	  </view>
    <view class="list">
		<view  class="item flex flex-col  " v-for="(item,index) in list" :key="index" @tap="go(item.id,item.status)">
			<view class="name flex flex-row justify-between items-center">
				<text class="f_30 c_5a" style="flex: 1">{{item.title}}</text>

				<view class="auth_btn f_30 orange" v-if="item.status==0">
					审核中
				</view>
				<view class="auth_btn f_30 orange" v-if="item.status==1">
					待开奖
				</view>

				<view class="auth_btn f_30 red" v-if="item.status==2">
					开奖中
				</view>
				<view class="auth_btn f_30 green " v-if="item.status==3">
					已结束
				</view>
				<view class="auth_btn f_30 c_52 " v-if="item.status==4">
					已取消
				</view>
			</view>
			<view class="time flex flex-row justify-between items-center mt_10">
				<text class="f_28 c_9">开奖时间:{{item.openTime}}</text>
				<view class="dele red"  v-if="item.status==0" @tap="dele(item.id,index)">
					<image src="@/static/dele.svg" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
	<ListFooter :loadtitle="loadtitle"></ListFooter>
  </view>
</template>

<script>
  import ListFooter from '../../components/listFooter/listFooter.vue';

  import {mapGetters} from "vuex";
  import {
  	merchantList,
	drawDele
  } from '@/api/activity.js';
  export default {
  computed: mapGetters(['isLogin', 'chatUrl', 'userInfo', 'uid']),
  components: {ListFooter},
    data() {
      return {
       list:[],
       loading: false,
       loadend: false,
       loadtitle: '加载更多',
       page: 1,
       limit: 10,
	   name:'',
	   value:0,
	   columns:[{
		   status:'',
		   name:'全部'
	   },{
		   status:0,
		   name:'审核中'
	   },{
		   status:1,
		   name:'待开奖'
	   },{
		   status:2,
		   name:'开奖中'
	   },{
		   status:3,
		   name:'已结束'
	   },{
		   status:4,
		   name:'已取消'
	   },
	   ]
      }
    },
	onLoad() {
		this.getlist();
	},
	onReachBottom: function() {
		this.page++
		this.getlist();
	},
	onPullDownRefresh() {
	  this.page = 1
	  this.list = []
	  this.loadend = false
	   this.getlist();
	    setTimeout(function () {
	      uni.stopPullDownRefresh();
	    }, 1000);
	  },
    methods: {
		search(){
			this.value=e.detail.value
			this.page=1
			this.list=[]
			this.getlist()
		},
		go(id,status){
			if(status==0){
				uni.navigateTo({
					url:'/pages/choujiang_add/choujiang_edit?id='+id
				})
			}else{
				uni.navigateTo({
					url:'/subpageB/choujiang_detail/choujiang_detail?id='+id
				})
			}
		},
		dele(id,index){
			drawDele({id:id}).then(res=>{
				if(res.code==200){
					uni.showToast({
						title:'删除成功'
					})
					this.list = this.list.splice(index,1)
				}
			})
		},
      getlist(){
		if (this.loading)
                return;
            if (this.loadend)
                return;
            this.loading = true;
            this.loadtitle = "";
			uni.showLoading({
				title: '加载中...'
			})
		  let data={
			  limit:this.limit,
			  page:this.page,
			  status:this.columns[this.value].status,
			  title:this.name
		  }
		  merchantList(data).then(res=>{
			uni.hideLoading()
					let list = res.data.list;
					let loadend = list.length < this.limit;
					this.list = this.list.concat(list)

					this.loadend = loadend;
					this.loading = false;
					this.loadtitle = loadend ? "到底啦，没有数据了~" : "加载更多"
				}).catch(err => {
					this.loading = false;
					this.loadtitle = '加载更多';
				});
	  },
	  bindPickerChange(e,i){
		  console.log(e)
		  this.value=e.detail.value
		  this.page=1
		  this.list=[]
		  this.getlist()
	  }
    }
  }
</script>

<style lang="scss">
  .auth_btn {
    width: 100rpx;
  }
	.dele{
		image{
			width: 40rpx;
		}
	}
	.list{
		width: 100%;
		padding: 20rpx;

		margin-top: 140rpx;
		.item{
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 20rpx;
			padding: 20rpx;
		}
	}
	.topsearch{
		width: 100%;
		background: #fff;
		padding: 20rpx;
		position: fixed;
		top:0;
		left: 0;
		.search{
			border: 1rpx solid #ebebeb;
			border-radius: 10rpx;
			input{
				width: 350rpx;
				height: 80rpx;
				line-height: 80rpx;
				padding-left: 10rpx;
			}
		}
		.button{
			background-color: #DF4B43;
			color: #fff;
			width: 100rpx;
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
.xz{
	border: 1rpx solid #ebebeb;
	width: 200rpx;
	height: 80rpx;
	.arrow{
		width: 40rpx;
	}
}
</style>
